import React from 'react'
import './SysMsg.css'
import icon from '../../../../../../../res/images/web/my/vip kim@2x.png'
const SysMsg = props => {

    const {type, msg,} = props
    let nickname
    let isVip
    let VipIcon
    if (msg !== undefined) {
        nickname = msg.nickname
        isVip = msg.vip > 0
        VipIcon = <img src={icon} alt='' style={{marginRight: '4px', width: '34px'}}/>
    }

    const grayT = (
        <div className='g-r-c-r-dialogue-sys-msg-c' style={{background: 'rgba(243,243,243,1)'}}>
            <p className='gray-text'>违规者封号处理</p>
        </div>
    )

    const welcomeT = (
        <div
            className='g-r-c-r-dialogue-sys-msg-c'
            style={{background: isVip ? 'rgba(250,114,104,0.1)' : 'rgba(240,240,240,1'}}
        >
            <span>欢迎</span>
            {isVip ? VipIcon : null}
            <span className='g-r-c-r-dialogue-sys-msg-text-name'
                  style={{
                      color: isVip ? 'rgb(250,114,104)' : 'rgb(43, 138, 247)'
                  }}>
                {nickname}
            </span>
            <span>
                光临直播间
            </span>

            {/*</div>*/}
        </div>
    )

    const liveT = (
        <div className={`g-r-c-r-dialogue-sys-msg-c${isVip ? ' g-r-c-r-dialogue-sys-msg-c-welcome' : ''}`}>
            {/*<p className='g-r-c-r-dialogue-sys-msg-text g-r-c-r-dialogue-sys-msg-text-welcome'>*/}
            {isVip ? VipIcon : null}
            <span
                className='g-r-c-r-dialogue-sys-msg-text-name'
                style={{
                    color: isVip ? 'rgb(250,114,104)' : 'rgb(43, 138, 247)'
                }}
            >
                {nickname}
            </span> 离开直播间
            {/*</p>*/}
        </div>
    )

    const mapper = {
        '封停': {
            t: grayT,
        },
        '欢迎': {
            t: welcomeT,
        },
        '离开': {
            t: liveT,
        }
    }

    return mapper[type].t
}

export default SysMsg
